<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="box">
        <div class="head">
            <div class="Image">
                &emsp;&emsp;<img src="./img/1.png" alt="">
            </div>
            <div class="two">
                <span>登录</span> &nbsp;&nbsp; <span>设置</span>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div class="one">
                    <button>收藏</button> &emsp;&emsp;
                    <button>添加到</button> &emsp;&emsp;
                    <button>下载</button>&emsp;&emsp;
                    <button>删除</button>&emsp;&emsp;
                    <button>清空列表</button>
                </div>
                <ol>
                    <li>
                        <input type="checkbox" name="" id=""> <span>歌曲</span> 
                        <!-- <span>歌手</span> <span>时长</span> -->
                    </li>
                    <li>
                        <input type="checkbox" name="" id="">

                        <span onclick="bf()">李家鑫 - 大城小爱</span>
                    </li>
                    <!-- <li>
                        <input type="checkbox" name="" id="">
                    </li> -->
                </ol>
            </div>
            <div class="right">

            </div>
        </div>
        <div class="footer">
            <audio controls id="music1">
                <source src="./img/李家鑫 - 大城小爱.mp3">
                <track default kind="captions" srclang="en" src="/video/php/friday.vtt" />
            </audio>
        </div>
    </div>
</body>
<script>
    function bf() {
        var audio = document.getElementById('music1');
        if (audio !== null) {
            //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
            alert(audio.paused);
            if (audio.paused) {

                audio.play();//audio.play();// 这个就是播放  
            } else {
                audio.pause();// 这个就是暂停
            }
        }
    }
</script>

</html>